<template>
  <div class="pHomeFv" id="sec_fv" data-intro="1">
    <div class="pHomeFv__inner">
      <div class="mountain mountain-orange">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-orange.svg" alt="" width="710" height="66">
          </div>
        </div>
      </div>
      <div class="mountain mountain-navy">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-navy.svg" alt="" width="1099" height="53">
          </div>
        </div>
      </div>
      <div class="mountain mountain-frontLeftSide">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-green1.svg" alt="" width="1194" height="264">
          </div>
        </div>
      </div>
      <div class="mountain mountain-frontRightSide">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-green2.svg" alt="" width="955" height="240">
          </div>
        </div>
      </div>
      <div class="mountain mountain-depthRightSide">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-green3.svg" alt="" width="1027" height="583">
          </div>
        </div>
      </div>
      <div class="mountain mountain-middleLeftSide">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-middlegreen.svg" alt="" width="1527" height="369">
          </div>
        </div>
      </div>
      <div class="mountain mountain-middleRightSide">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_mountainFv-lightgreen.svg" alt="" width="2353" height="401">
          </div>
        </div>
      </div>
      <div class="human human-1">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_fv3.png" alt="" width="1039" height="653">
          </div>
        </div>
      </div>
      <div class="human human-2">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_fv5.png" alt="" width="1144" height="692">
          </div>
        </div>
      </div>
      <div class="human human-3">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_fv1.png" alt="" width="649" height="475">
          </div>
        </div>
      </div>
      <div class="human human-4">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_fv4.png" alt="" width="824" height="366">
          </div>
        </div>
      </div>
      <div class="human human-5">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_fv2.png" alt="" width="485" height="349">
          </div>
        </div>
      </div>
      <div class="sun">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_sun-fv.png" alt="" width="240" height="238">
          </div>
        </div>
      </div>
      <div class="cCloud cCloud-type1">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_cloud1.png" alt="" width="538" height="236">
          </div>
        </div>
      </div>
      <div class="cCloud cCloud-type2">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_cloud2.png" alt="" width="538" height="240">
          </div>
        </div>
      </div>
      <div class="cCloud cCloud-type4">
        <div class="img">
          <div class="img__inner">
            <img src="../assets/img/参考/obj_cloud4.png" alt="" width="540" height="226">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BackgroundAnimation',
  mounted() {
    // 设置加载状态为1，触发动画
    document.body.setAttribute('data-loading', '1');
  }
}
</script>

<style scoped>
:root {
  --white: #fff;
  --navy: #08385e;
  --navy-dark: #00244a;
  --orange: #ea5a26;
  --orange-bg: #df5d2e;
  --green: #176557;
  --green2: #075b4c;
  --yellow: #febb00;
  --beige: #e7ceb8;
}

/* 基础样式 */
.pHomeFv {
  position: absolute;
  z-index: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #87CEEB 0%, #B0E2FF 100%);
}

.pHomeFv__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  opacity: 0;
}

/* 通用图片容器样式 */
.pHomeFv__inner .img,
.pHomeFv__inner .img__inner,
.pHomeFv__inner picture,
.pHomeFv__inner img {
  width: 100%;
  height: 100%;
}

.pHomeFv__inner .img,
.pHomeFv__inner .img__inner,
.pHomeFv__inner picture {
  display: flex;
}

.pHomeFv__inner img {
  object-fit: contain;
}

/* 山脉样式 */
.pHomeFv__inner .mountain {
  position: absolute;
  z-index: 0;
}

.pHomeFv__inner .mountain-orange {
  bottom: -1px;
  left: 50%;
  z-index: 9;
  transform: translate(calc(-50% + min(3.7037037037svh,30rem)));
  width: min(65.6881481481svh,532.074rem);
  height: min(5.9768518519svh,48.4125rem);
}

.pHomeFv__inner .mountain-navy {
  bottom: -1px;
  left: 50%;
  z-index: 8;
  transform: translate(calc(-50% + min(1.3888888889svh,11.25rem)));
  width: min(101.6970370370svh,823.746rem);
  height: min(4.7512962963svh,38.4855rem);
}

.pHomeFv__inner .mountain-frontLeftSide {
  left: 50%;
  bottom: calc(min(4.0740740741svh,33rem)*-1);
  transform: translate(calc(-50% - min(74.259259259svh,601.5rem)));
  width: min(110.5555555556svh,895.5rem);
  height: min(24.3912962963svh,197.5695rem);
  z-index: 10;
}

.pHomeFv__inner .mountain-frontRightSide {
  left: 50%;
  bottom: calc(min(.1851851852svh,1.5rem)*-1);
  transform: translate(calc(-50% + min(71.0185185185svh,575.25rem)));
  width: min(88.3333333333svh,715.5rem);
  height: min(22.0987037037svh,178.9995rem);
  z-index: 7;
}

.pHomeFv__inner .mountain-depthRightSide {
  left: 50%;
  z-index: 4;
  bottom: min(1.8518518519svh,15rem);
  transform: translate(calc(-50% + min(73.4304629630svh,594.78675rem)));
  width: min(95.0090740741svh,769.5735rem);
  height: min(53.9528703704svh,437.01825rem);
}

.pHomeFv__inner .mountain-middleLeftSide {
  left: 50%;
  bottom: calc(min(6.9444444444svh,56.25rem)*-1);
  transform: translate(calc(-50% - min(28.8888888889svh,234rem)));
  width: min(141.3887962963svh,1145.24925rem);
  height: min(34.1345370370svh,276.48975rem);
  z-index: 6;
}

.pHomeFv__inner .mountain-middleRightSide {
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50% + min(27.7777777778svh,225rem)));
  width: min(217.8239814815svh,1764.37425rem);
  height: min(37.0236111111svh,299.89125rem);
  z-index: 5;
}

/* 人物样式 */
.pHomeFv__inner .human {
  position: absolute;
  z-index: 12;
}

.pHomeFv__inner .human-1 {
  left: 50%;
  bottom: min(1.2037037037svh,9.75rem);
  transform: translate(calc(-50% - min(39.7918518519svh,322.314rem)));
  width: min(48.1022222222svh,389.628rem);
  height: min(30.2048148148svh,244.659rem);
}

.pHomeFv__inner .human-2 {
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50% + min(23.5185185185svh,190.5rem)));
  width: min(52.9629629630svh,429rem);
  height: min(32.0370370370svh,259.5rem);
}

.pHomeFv__inner .human-3 {
  left: 50%;
  bottom: min(23.1481481481svh,187.5rem);
  transform: translate(calc(-50% - min(49.2039814815svh,398.55225rem)));
  width: min(30.8413518519svh,249.81495rem);
  height: min(24.1637407407svh,195.7263rem);
}

.pHomeFv__inner .human-4 {
  left: 50%;
  bottom: min(31.4814814815svh,255rem);
  transform: translate(calc(-50% + min(42.9629629630svh,348rem)));
  width: min(38.1481481481svh,309rem);
  height: min(16.9444444444svh,137.25rem);
}

.pHomeFv__inner .human-5 {
  left: 50%;
  bottom: min(41.71875svh,333.75rem);
  transform: translate(calc(-50% + min(51.5277777778svh,417.375rem)));
  width: min(24.7777777778svh,200.7rem);
  height: min(15.7777777778svh,127.8rem);
}

/* 太阳样式 */
.pHomeFv__inner .sun {
  position: absolute;
  left: 50%;
  z-index: 11;
  top: min(11.15625svh,89.25rem);
  transform: translate(calc(-50% + min(37.7777777778svh,306rem)));
  width: min(11.1111111111svh,90rem);
  height: min(11.0185185185svh,89.25rem);
}

.pHomeFv__inner .sun .img__inner {
  animation: RotateStep 48s steps(8) infinite;
}

/* 云朵样式 */
.pHomeFv__inner .cCloud {
  position: absolute;
  z-index: 14;
}

.pHomeFv__inner .cCloud-type1 {
  left: 50%;
  top: min(22.5925925926svh,183rem);
  transform: translate(calc(-50% - min(61.8055555556svh,500.625rem)));
  width: min(13.9814814815svh,113.25rem);
  height: min(6.1111111111svh,49.5rem);
}

.pHomeFv__inner .cCloud-type2 {
  left: 50%;
  top: min(12.9629629630svh,105rem);
  transform: translate(calc(-50% - min(36.1574074074svh,292.875rem)));
  width: min(21.7592592593svh,176.25rem);
  height: min(9.6296296296svh,78rem);
}

.pHomeFv__inner .cCloud-type4 {
  left: 50%;
  top: min(11.0185185185svh,89.25rem);
  transform: translate(calc(-50% + min(61.1111111111svh,495rem)));
  width: min(13.8888888889svh,112.5rem);
  height: min(5.8333333333svh,47.25rem);
}

/* 动画 */
@keyframes RotateStep {
  0% { transform: rotate(0); }
  12.5% { transform: rotate(45deg); }
  25% { transform: rotate(90deg); }
  37.5% { transform: rotate(135deg); }
  50% { transform: rotate(180deg); }
  62.5% { transform: rotate(225deg); }
  75% { transform: rotate(270deg); }
  87.5% { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}

/* 云朵动画 */
@keyframes ShakeX1 {
  0% { transform: translate(0); }
  50% { transform: translate(-8px); }
  100% { transform: translate(0); }
}

@keyframes ShakeX2 {
  0% { transform: translate(0); }
  50% { transform: translate(-12px); }
  100% { transform: translate(0); }
}

@keyframes ShakeY1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

@keyframes ShakeY2 {
  0% { transform: translateY(0); }
  50% { transform: translateY(12px); }
  100% { transform: translateY(0); }
}

/* 应用云朵动画 */
.pHomeFv__inner .cCloud-type1 .img__inner {
  animation: ShakeX1 3s ease-in-out infinite alternate;
}

.pHomeFv__inner .cCloud-type1 img {
  animation: ShakeY1 4s ease-in-out infinite alternate;
}

.pHomeFv__inner .cCloud-type2 .img__inner {
  animation: ShakeX1 3s ease-in-out infinite alternate;
}

.pHomeFv__inner .cCloud-type2 img {
  animation: ShakeY2 5s ease-in-out infinite alternate;
}

.pHomeFv__inner .cCloud-type4 .img__inner {
  animation: ShakeX2 3s ease-in-out infinite alternate;
}

.pHomeFv__inner .cCloud-type4 img {
  animation: ShakeY1 4s ease-in-out infinite alternate;
}

/* 页面加载动画 */
body[data-loading="0"] .pHomeFv[data-intro="1"] .pHomeFv__inner {
  transition: .3s ease opacity;
  opacity: 1;
}

body[data-loading="1"] .pHomeFv[data-intro="1"] .pHomeFv__inner {
  opacity: 1;
}

/* 元素加载动画 */
.pHomeFv__inner .mountain .img {
  opacity: 0;
  transform: translateY(100%);
}

body[data-loading="1"] .pHomeFv[data-intro="1"] .pHomeFv__inner .mountain .img {
  opacity: 0;
  transform: translateY(100%);
  animation: .4s 0s cubic-bezier(.33,1,.68,1) FadeSlideInY forwards;
}

.pHomeFv__inner .human .img {
  transform: scale(1);
  opacity: 0;
}

body[data-loading="1"] .pHomeFv[data-intro="1"] .pHomeFv__inner .human .img {
  transform: scale(1);
  opacity: 0;
  animation: .8s 0s linear BoundIn forwards;
}

/* 加载动画延迟 */
.pHomeFv__inner .mountain-depthRightSide .img { animation-delay: .1875s; }
.pHomeFv__inner .mountain-middleRightSide .img { animation-delay: .3s; }
.pHomeFv__inner .mountain-middleLeftSide .img { animation-delay: .45s; }
.pHomeFv__inner .mountain-frontRightSide .img { animation-delay: .6s; }
.pHomeFv__inner .mountain-navy .img { animation-delay: .75s; }
.pHomeFv__inner .mountain-frontLeftSide .img { animation-delay: .9s; }
.pHomeFv__inner .mountain-orange .img { animation-delay: 1.05s; }

.pHomeFv__inner .human-5 .img { animation-delay: .45s; }
.pHomeFv__inner .human-4 .img { animation-delay: .6s; }
.pHomeFv__inner .human-3 .img { animation-delay: .9s; }
.pHomeFv__inner .human-2 .img { animation-delay: 1.05s; }
.pHomeFv__inner .human-1 .img { animation-delay: 1.2s; }

/* 加载动画关键帧 */
@keyframes FadeSlideInY {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes BoundIn {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  8% {
    transform: scale(1.07);
    opacity: 1;
  }
  17% {
    transform: scale(1.232);
    opacity: 1;
  }
  34% {
    scale: 1;
    opacity: 1;
  }
  51% {
    transform: scale(1.071);
    opacity: 1;
  }
  68% {
    transform: scale(1);
    opacity: 1;
  }
  84% {
    transform: scale(1.03525);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式样式 */
@media (max-width: 768px) {
  .pHomeFv__inner .mountain-orange {
    z-index: 10;
    transform: translate(calc(-50% + min(10.8074534161svh,87rem)));
    width: min(46.3509316770svh,373.125rem);
    height: min(6.8012422360svh,54.75rem);
  }

  .pHomeFv__inner .mountain-navy {
    z-index: 8;
    bottom: -2px;
    transform: translate(calc(-50% - min(-1.8633540373svh,-15rem)));
    width: min(97.0807453416svh,781.5rem);
    height: min(17.5155279503svh,141rem);
  }

  .pHomeFv__inner .human-1 {
    transform: translate(calc(-50% - min(4.6583850932svh,37.5rem)));
    width: min(28.9751552795svh,233.25rem);
    height: min(18.1943478261svh,146.4645rem);
  }

  .pHomeFv__inner .human-2 {
    bottom: min(18.0745341615svh,145.5rem);
    transform: translate(calc(-50% + min(6.8944099379svh,55.5rem)));
    width: min(21.0559006211svh,169.5rem);
    height: min(13.0434782609svh,105rem);
  }

  .pHomeFv__inner .sun {
    bottom: initial;
    top: min(12.6242236025svh,101.625rem);
    transform: translate(calc(-50% + min(13.4161490683svh,108rem)),-50%);
    width: min(7.1739130435svh,57.75rem);
    height: min(7.1739130435svh,57.75rem);
  }

  @keyframes ShakeX1_sp {
    0% { transform: translate(0); }
    50% { transform: translate(-4px); }
    100% { transform: translate(0); }
  }

  @keyframes ShakeX2_sp {
    0% { transform: translate(0); }
    50% { transform: translate(-6px); }
    100% { transform: translate(0); }
  }

  @keyframes ShakeY1_sp {
    0% { transform: translateY(0); }
    50% { transform: translateY(4px); }
    100% { transform: translateY(0); }
  }

  @keyframes ShakeY2_sp {
    0% { transform: translateY(0); }
    50% { transform: translateY(6px); }
    100% { transform: translateY(0); }
  }

  .pHomeFv__inner .cCloud-type1 .img__inner {
    animation: ShakeX1_sp 3s ease-in-out infinite alternate;
  }

  .pHomeFv__inner .cCloud-type1 img {
    animation: ShakeY1_sp 4s ease-in-out infinite alternate;
  }

  .pHomeFv__inner .cCloud-type2 .img__inner {
    animation: ShakeX1_sp 3s ease-in-out infinite alternate;
  }

  .pHomeFv__inner .cCloud-type2 img {
    animation: ShakeY2_sp 5s ease-in-out infinite alternate;
  }

  .pHomeFv__inner .cCloud-type4 .img__inner {
    animation: ShakeX2_sp 3s ease-in-out infinite alternate;
  }

  .pHomeFv__inner .cCloud-type4 img {
    animation: ShakeY1_sp 4s ease-in-out infinite alternate;
  }
}
</style> 